import { defineComponent, onActivated, onDeactivated, onMounted, reactive, ref } from "vue";
import styles from "./AccidentList.module.less";
import { imgPath } from "@/common/utils";
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import { $accidentList } from "@/api/userCenter/accidentList/accidentList";
import { useRouter } from "vue-router";
import useCacheWhenTo from "@/hooks/useKeepAlive";
export default defineComponent({
  name: 'userCenterAccidentList',
  setup() {
    // 设置缓存
    useCacheWhenTo(['userCenterAccidentListOrderDetail']);
    const router = useRouter();
    const navs = reactive({
      list: [
        {
          text: '全部订单',
        },
        {
          text: '待支付',
        },
        {
          text: '待出单',
        },
        {
          text: '出单失败',
        },
        {
          text: '已出单',
        },
        {
          text: '已退保',
        },
        {
          text: '已支付',
        },
        {
          text: '已取消',
        },
      ],
      navsActived: 0,
      order_status: null,
      picc_order_status: null,
    } as any)

    const NavClick = (index: number) => {
      navs.navsActived = index;
      switch (index) {
        case 0:
          navs.order_status = null;
          navs.picc_order_status = null;
          break;
        case 1:
          navs.order_status = 0;
          navs.picc_order_status = null;
          break;
        case 2:
          navs.order_status = null;
          navs.picc_order_status = 0;
          break;
        case 3:
          navs.order_status = null;
          navs.picc_order_status = -1;
          break;
        case 4:
          navs.order_status = null;
          navs.picc_order_status = 1;
          break;
        case 5:
          navs.order_status = 999;
          navs.picc_order_status = null;
          break;
        case 6:
          navs.order_status = 11;
          navs.picc_order_status = null;
          break;
        case 7:
          navs.order_status = 1000;
          navs.picc_order_status = null;
          break;
      }
      getAccidentList();
    }
    //导航栏
    const Navs = () => (
      <div class={styles['accidentList-nav']}>
        {
          navs.list.map((itemY: any, index: number) => (
            <div class={styles['nav-item']} onClick={() => { NavClick(index) }}>
              <span class={[styles.text,
              index === navs.navsActived && styles['nav-item-actived'],
              index !== navs.navsActived && styles['nav-item-noActived']]}
              >{itemY.text}</span>
            </div>
          ))
        }
      </div>
    )

    //搜索条件
    const filterForm = reactive({
      insureTime: {  //投保时间类型
        timeType: '1',
        time: [],
      },
      insureTimeType: [
        {
          label: '投保时间',
          value: '1',
        },
      ],
      order: {   //投保单号
        orderType: '1',
        orderId: null,
      },
      orderType: [
        {
          label: '投保单号',
          value: '1',
        },
      ],
      seniorFrom: {    //高级筛选表单
        insured_name: null,  //被保险人姓名
        idCard: null,  //被保险人证件号
        appli_name: null,  //投保联系人
        appli_mobile: null,  //投保联系人电话
      },
    })
    //时间change
    const timeChange = () => {
      if (filterForm.insureTime.time === null) {
        filterForm.insureTime.time = [];
      }
    }
    //搜索
    const search = () => {
      console.log(filterForm)
      getAccidentList();
    }
    //重置
    const reset = () => {
      filterForm.insureTime.time = [];
      filterForm.order.orderId = null;
      filterForm.seniorFrom.insured_name = null;
      filterForm.seniorFrom.idCard = null;
      filterForm.seniorFrom.appli_name = null;
      filterForm.seniorFrom.appli_mobile = null;
    }
    //筛选
    const Filter = () => (
      <div class={styles['accidentList-filter']}>
        <a-form class={styles['filter-form']}>
          <a-select
            v-model={[filterForm.insureTime.timeType, "value"]}
            options={filterForm.insureTimeType}
            style="width:12%"
          >
          </a-select>
          <a-range-picker v-model:value={[filterForm.insureTime.time]} valueFormat="YYYY-MM-DD" style="margin-left: 10px;" onChange={() => { timeChange() }}></a-range-picker>
          <a-select
            v-model={[filterForm.order.orderType, "value"]}
            options={filterForm.orderType}
            style="width:12%;margin-left: 10px;"
          >
          </a-select>
          <a-input style="width:24%;margin-left: 10px;" v-model:value={filterForm.order.orderId} />
        </a-form>
        <div class={styles['advan-box']}>
          <a-form class={styles['advan-box-form']}>
            <div class={styles['advan-box-row']}>
              <div class={styles['form-item']}>
                <div class={styles['form-label']}>被保险人姓名：</div>
                <a-input style="width:50%;height:32px;" v-model:value={filterForm.seniorFrom.insured_name} />
              </div>
              <div class={styles['form-item']}>
                <div class={styles['form-label']}>被保险人证件号：</div>
                <a-input style="width:50%;height:32px;" v-model:value={filterForm.seniorFrom.idCard} />
              </div>
            </div>
            <div class={styles['advan-box-row']}>
              <div class={styles['form-item']}>
                <div class={styles['form-label']}>投保人：</div>
                <a-input style="width:50%;height:32px;" v-model:value={filterForm.seniorFrom.appli_name} />
              </div>
              <div class={styles['form-item']}>
                <div class={styles['form-label']}>投保人电话：</div>
                <a-input style="width:50%;height:32px;" v-model:value={filterForm.seniorFrom.appli_mobile} />
              </div>
            </div>
            <div class={styles['advan-box-row']}>
              <div class={styles.plain} onClick={() => { reset() }}>重置</div>
              <div class={styles.button} onClick={() => { search() }}>搜索</div>
            </div>
          </a-form>
        </div>
      </div>
    )

    const state = reactive({
      list: [],
      total: 0,
      page: 1,
      pageSize: 10,
    })
    //跳页
    const onChange = (page: number, pageSize: number) => {
      state.page = page;
      state.pageSize = pageSize;
      const dom: any = document.getElementById("app");
      dom.scrollTop = 250;
      getAccidentList();
    }

    const getAccidentList = () => {
      $accidentList({
        insurance_type: 1,
        proposal_no:filterForm.order.orderId || undefined,
        policy_start_create_time: filterForm.insureTime.time.length > 1 ? String((new Date(filterForm.insureTime.time[0]).getTime() / 1000).toFixed(0)) : undefined,
        policy_end_create_time: filterForm.insureTime.time.length > 1 ? String((new Date(filterForm.insureTime.time[1]).getTime() / 1000).toFixed(0)) : undefined,
        insured_id_no:filterForm.seniorFrom.idCard || undefined,
        insured_name:filterForm.seniorFrom.insured_name || undefined,
        applicant_name:filterForm.seniorFrom.appli_name || undefined,
        applicant_mobile:filterForm.seniorFrom.appli_mobile || undefined,
        picc_order_status: navs.picc_order_status,
        order_status: navs.order_status,
        page: state.page,
        limit: state.pageSize,
      }).then((res: any) => {
        state.list = res?.data?.data || [];
        state.total = res?.data?.total;
        state.page = res?.data?.current_page;
        state.pageSize = res?.data?.per_page;
      })
    }
    // 滚动条上拉距离
    const scrollTop = ref(0);

    // 记录滚动条上拉距离
    const handleScroll = (e: any) => {
      let scrollTops = e.target.scrollTop;
      scrollTop.value = scrollTops;
    }
    onMounted(() => {
      getAccidentList();
    })
    // 激活页面时设置滚动条置为记录的上拉距离
    onActivated(() => {
      (document.getElementById("userCenterScroll") as any).scrollTop = scrollTop.value;
      document.getElementById("userCenterScroll")?.addEventListener("scroll", handleScroll);
    });

    onDeactivated(() => {
      document.getElementById("userCenterScroll")?.removeEventListener("scroll", handleScroll);
    })
    //列表
    const AccidentList = () => (
      <div class={styles['accident-list']}>
        <div class={styles['accident-list-thead']}>
          <div class={styles['col-1']}>订单详情</div>
          <div class={styles['col-2']}>状态/保费（元）</div>
          <div class={styles['col-3']}>操作</div>
        </div>
        {
          state.list.length === 0 ?
            <div class={styles['no-message']}>
              <img src={imgPath('/userCenter/no-message.jpg')} />
            </div> :
            <div>
              {
                state.list.map((item: any) => (
                  <div class={styles['order-item']}>
                    <div class={styles['order-item-headerBox']}>
                      <span class={styles.orderNum}>订单号：{item.order_no}</span>
                      <span>下单时间：{item.create_time}</span>
                    </div>
                    <div class={styles['order-item-content']}>
                      <div class={styles['order-item-info']}>
                        <img src={imgPath('/userCenter/orderImg.png')} />
                        <div class={styles['prod-info']}>
                          <div class={styles.title}>{item.name}{item.plan_name}</div>
                          <div class={styles['order-item-row']}>
                            <span>保险期间：{item.start_date}至{item.end_date}</span>
                          </div>
                          <div class={styles['order-item-row']}>
                            <span>投保人：{item.applicant_name}</span>
                          </div>
                          {
                            item.picc_order ? <>
                              <div class={styles['order-item-row']}>
                                <span>投保单号：{item.picc_order.proposal_no}</span>
                              </div>
                              <div class={styles['order-item-row']}>
                                <span>出单时间：{item.picc_order.create_time}</span>
                              </div>
                              <div class={styles['order-item-row']}>
                                <span>发票状态：{item.picc_order.invoice_status.label}</span>
                              </div>
                              <div class={styles['order-item-row']}>
                                <span>保单号：</span><span class={styles.value}>{item.picc_order.policy_no}</span>
                              </div>
                            </> : <div style={{ display: 'none' }}>
                              1231</div>
                          }
                        </div>
                      </div>
                      <div class={styles['order-item-money']}>
                        {
                          (navs.navsActived === 1 || navs.navsActived === 5 || navs.navsActived === 7) ?
                            <div class={styles.status}>{item.order_status.label}</div> : <div class={styles.status}>{item.picc_order_status.label}</div>
                        }
                        <div class={styles.money}>￥{item.sum_premium}</div>
                        <div>{item.pay_type_name}</div>
                      </div>
                      <div class={styles['order-item-operate']}>
                        <span class={styles.detail} onClick={() => {
                          router.push(`/userCenter/accidentList/orderDetail?order_no=${item.order_no}`);
                          const dom: any = document.getElementById("app");
                          dom.scrollTop = 0;
                        }}>订单详情</span>
                      </div>
                    </div>
                  </div>
                ))
              }
              <div class={styles.pagination}>
                <a-pagination total={state.total} v-model:current={state.page} pageSize={state.pageSize} onChange={(page: any, pageSize: any) => { onChange(page, pageSize) }} />
              </div>
            </div>
        }
      </div>
    )
    //下载导出
    const exportClick = () => {

    }

    return () => (
      <div class={styles.accidentList}>
        <div class={styles['header-box']}>
          <span>意外险订单</span>
          <div class={styles['export-btn']} onClick={() => { exportClick() }}>
            <img src={imgPath('/userCenter/exportBTn.png')} />
            <span>导出申请</span>
          </div>
        </div>
        <div class={styles['accidentList-content']}>
          {/* <div class={styles.tips}>
            <p>1、因投保数据量较大，请您选择投保时间和投保险种后，点击「搜索」按钮查询数据。</p>
            <p>2、如需 查询关联分社订单 或 按线路查询订单，请点击「高级筛选」。</p>
          </div> */}
          <Navs />
          <Filter />
          <AccidentList />
        </div>
      </div>
    )
  }
})